<docs>
---
title: 支持雾化效果
---

通过 `isFog` 属性控制是否启用雾化效果。注意，该属性在 `isTyping` 为 `true` 时才生效。切回覆盖默认的 `typing` 后缀属性。
</docs>

<script setup lang="ts">
const content = ref(
  `#### 标题 \n 这是一个 Markdown 示例。\n - 列表项 1 \n - 列表项 2 **粗体文本** 和 *斜体文本* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\``
);

function setContent(type: number) {
  content.value = '';
  setTimeout(() => {
    content.value =
      type === 1
        ? `#### 标题 \n 这是一个 Markdown 示例。\n - 列表项 1 \n - 列表项 2 **粗体文本** 和 *斜体文本* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\``
        : '欢迎使用 Element-Plus-X 💖'.repeat(10);
  }, 800);
}
</script>

<template>
  <ClientOnly>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <div style="display: flex; gap: 10px">
        <el-button @click="setContent(1)"> 雾化 Markdown </el-button>
        <el-button @click="setContent(2)"> 雾化 文本 </el-button>
      </div>

      <Typewriter :content="content" :is-markdown="true" is-fog typing />
    </div>
  </ClientOnly>
</template>
